德阳市罗江区智云优创新科技有限公司
<div id="app">
    <h1>智能口罩</h1>
    <div id="info">
        <p>当前温度:</p>
        <p><span id="temperature">--</span></p>
        <p>当前湿度:</p>
        <p><span id="humidity">--</span></p>
        <p>电量:</p>
        <p><span id="battery">98</span>%</p>
    </div>
    <button id="connectBtn">连接蓝牙</button>
</div>

<style>
    #app {
        text-align: center;
        margin-top: 50px;
    }

    h1 {
        font-size: 36px;
    }

    #info {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        font-size: 24px;
    }

    #info p {
        margin: 0 20px;
    }

    #connectBtn {
        width: 200px;
        height: 50px;
        font-size: 24px;
        border-radius: 10px;
        border: none;
        background-color: #4caf50;
        color: white;
        margin-top: 50px;
        cursor: pointer;
    }

    #connectBtn:hover {
        background-color: #388e3c;
    }
</style>

<script>
    const connectBtn = document.getElementById('connectBtn');
    const temperatureEl = document.getElementById('temperature');
    const humidityEl = document.getElementById('humidity');
    const batteryEl = document.getElementById('battery');

    let bluetoothDevice;

    async function connect() {
        try {
            const options = {
                filters: [{
                    services: ['battery_service']
                }]
            };
            bluetoothDevice = await navigator.bluetooth.requestDevice(options);
            const server = await bluetoothDevice.gatt.connect();
            const service = await server.getPrimaryService('battery_service');
            const characteristic = await service.getCharacteristic('battery_level');
            characteristic.addEventListener('characteristicvaluechanged', handleCharacteristicValueChanged);
            await characteristic.startNotifications();
            console.log('Connected to Bluetooth device:', bluetoothDevice.name);
            connectBtn.disabled = true;
        } catch (error) {
            console.error('Bluetooth connection error:', error);
        }
    }

    function handleCharacteristicValueChanged(event) {
        const value = event.target.value;
        const batteryLevel = value.getUint8(0);
        batteryEl.textContent = batteryLevel + '%';
    }

    function updateTemperatureAndHumidity() {
        const temperature = Math.floor(Math.random() * 10) + 20; // 模拟温度
        const humidity = Math.floor(Math.random() * 30) + 50; // 模拟湿度
        temperatureEl.textContent = temperature + '℃';
        humidityEl.textContent = humidity + '%';
    }

    setInterval(updateTemperatureAndHumidity, 5000); // 定时更新温度湿度

    connectBtn.addEventListener('click', connect);
</script>